<template>
  <div class="content">
    <!-- 头部 -->
    <div class="header">
         <!-- 公司名称 -->
        <span class="companyName" style="margin-left:66px;color:white; font-family: FZZZHONGJW-GB1-0; font-size:32px;cursor: pointer;" @click="backhomeClick">开源数据采集系统</span>

        <span class="account" style="float:right">
          <el-tooltip effect="dark" content="退出系统" placement="bottom">
             <el-button id ="exitBtn" icon="el-icon-switch-button" circle @click="exitSystemClick" style="cursor: pointer;" size="small"></el-button>
          </el-tooltip>
        </span>
        <span class="account" style="float:right;font-size:20px;color:#FFFFFF">
            {{userName}}
        </span>
        <span class="accountHeader" style="float:right">
            <!-- <img src="@/assets/img/headerImg.jpg"  style="width:40px;border-radius:20px;margin-top: 20px;"/> -->
        </span>
    </div>
    <!-- 内容 -->
    <el-menu background-color="#fff" text-color="#000" active-text-color="#409EFF" :default-active="activeIndex" router
      style="min-height:100vh;width:230px;float:left">
      <NavMenu :navMenus="menuData"></NavMenu>
    </el-menu>
    <router-view style="margin-left:250px"></router-view>
  </div>
</template>

<script>
import NavMenu from "@/components/sub/NavMenu.vue";

export default {
  components: {
    NavMenu: NavMenu
  },
  data() {
    return {
      userName: '',
      activeIndex: this.$route.path,
      menuData: [],
    };
  },
   methods:{
    getData() {
      this.userName = sessionStorage.getItem('user');
      console.log(sessionStorage.getItem('user'));
      let arr = []
      this.menuData = []
      this.$api.menu.findAll().then(res => {
        console.log(res);
        arr = res.data
        for(let i =0;i<res.data.length;i++) {
          if(arr[i].menuParent==null){
            this.menuData.push({
              entity:{
                id: arr[i].menuId, 
                name: arr[i].menuUrl,
                icon: arr[i].menuIcon,
                alias: arr[i].menuName,
              },
              childs:[]
            });
          }
        }

        for(let i =0;i<res.data.length;i++){
          for(let j =0;j<this.menuData.length;j++){
            if(arr[i].menuParent == this.menuData[j].entity.id){
              this.menuData[j].childs.push({
                entity: {
                  id: arr[i].menuId, 
                  name: arr[i].menuUrl,
                  icon: arr[i].menuIcon,
                  alias: arr[i].menuName,
                },
              })
            }
          }
        }
        this.activeIndex = this.menuData[0].childs[0].entity.name
      });
    },
    backhomeClick() {
      this.$router.push('/home')
    },
    // 退出系统
    exitSystemClick() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
  },
  mounted(){
    console.log('8888888888888888888888888888888888888888888999');
    console.log(this.activeIndex)
    this.getData()
  },
  created:function () {
    this.$emit('header', false);
    if (this.activeIndex != '/userManage') {
      this.activeIndex = '/userManage'
      this.$router.replace('/userManage')
    }
  },
  watch:{
    '$route'(to,from){
      this.activeIndex=to.path
    }
  }
};
</script>

<style lang="less" scoped>
.content {
//   height: 100%;
  width: 100%;
  margin:0px auto;
  // background-color: rgb(255, 255, 255);

  .header {
  width: 100%;
  height: 80px;
  // margin-bottom: 40px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #37508D;
  background-color: #37508D;
  

  .companyName{
    margin-left: 10px;
    height: 80px;
    line-height: 80px;
    width: 280px;
    float: left;
    // background-color: chocolate;
  }

  .account {
    margin-right: 20px;
    height: 80px;
    line-height: 80px;
    width: 80px;
    // background-color: cornflowerblue;
  }

  .accountHeader {
    margin-right: 10px;
    height: 80px;
    line-height: 80px;
    width: 50px;
  }
}
}

</style>